<script setup>
import ChatContent from '@/components/chatContent.vue';
const props = defineProps({
    chatList: {
        type: Array,
        default: []
    }
})
const content = `
    在浩瀚的宇宙中，地球以其独特的蓝色外衣显得格外引人注目。这层蓝色，便是我们赖以生存的空气之源——蓝天。
    蓝天，不仅是自然界的一部分，更是人类文明与自然和谐共生的象征。它承载着无数生命的梦想与希望，
    是诗人笔下永恒的主题，画家画布上不灭的色彩，也是科学家探索宇宙奥秘的起点。

    自古以来，蓝天便以其广阔无垠、深邃莫测吸引着人类的目光。古人观天象以预测风雨，
    航海者依星辰指引方向，而今，我们仰望同一片天空，心中涌动的是对未知世界的无限憧
    憬与敬畏。蓝天之下，万物生长，四季更迭，它是时间的见证者，记录着历史的变迁与文明的进步。

    然而，随着工业化的脚步加快，这片曾经纯净的蓝天也遭遇了前所未有的挑战。空气污染、温
    室效应等问题日益严峻，不仅影响了人类的生活质量，更对生态系统造成了不可逆的损害。
    因此，保护蓝天，维护其原有的清澈与蔚蓝，成为了全人类共同的责任与使命。

    为了守护这份宝贵的自然资源，各国政府与国际组织纷纷采取行动，制定了一系列环保政
    策与措施。从减少碳排放到推广绿色能源，从加强环境监管到提高公众环保意识，每一项努力都
    是为了让蓝天重现昔日的辉煌。同时，科技创新也为解决环境问题提供了新的可能，比如清洁能源
    技术的发展、空气净化系统的优化等，这些都为保护蓝天、守护地球的未来带来了希望。
`

</script>

<template>
    <ul class="chat_list">
        <li class="chat_item user">
            <span class="chat_item_avatar iconfont icon-user"></span>
            <div class="chat_item_content">
                <div class="chat_item_content_text">
                    <ChatContent content="你好！" :showCursor="false"/>
                </div>
                <div class="chat_item_content_function">
                    <span class="iconfont icon-play"></span>
                    <span class="iconfont icon-copy"></span>
                    <span class="iconfont icon-refresh"></span>
                </div>
            </div>
        </li>
        <li class="chat_item gpt">
            <span class="chat_item_avatar iconfont icon-gpt"></span>
            <div class="chat_item_content">
                <div class="chat_item_content_text">
                    <ChatContent :content="content" :showCursor="false"/>
                </div>
                <div class="chat_item_content_function">
                    <span class="iconfont icon-play"></span>
                    <span class="iconfont icon-copy"></span>
                    <span class="iconfont icon-refresh"></span>
                </div>
            </div>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.chat_list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 14px;
    .chat_item {
        display: flex;
        .chat_item_avatar {
            margin-top: 6px;
            font-size: 24px;
        }
        .chat_item_content {
            display: flex;
            flex-direction: column;
            .chat_item_content_text {
                width: fit-content;
                border-radius: 10px;
                padding: 10px;
                position: relative;
            }
            .chat_item_content_function{
                margin-top: 10px;
                display: flex;
                gap: 10px;
                .iconfont{
                    font-size: 16px;
                    cursor: pointer;
                }
            }
        }
        &.user {
            flex-direction: row-reverse;
            margin-left: 30px;            
            .chat_item_content {
                .chat_item_content_text {
                    margin-right: 12px;
                    margin-left: 0;
                    background-color: #a4a4a4;               
                    &::before {
                        content: '';
                        position: absolute;
                        right:-5px;
                        top: 13px;
                        width: 10px;
                        height: 10px;
                        transform: rotate(45deg);
                        background-color: #a4a4a4;
                    }
                }
                .chat_item_content_function{
                    margin-right: 12px;
                    flex-direction: row-reverse;
                }
            }
        }
        &.gpt {
            margin-right: 30px;
            .chat_item_content {
                .chat_item_content_text {
                    margin-left: 12px;
                    margin-right: 0;
                    background-color: skyblue;
                    &::before {
                    content: '';
                    position: absolute;
                    left:-5px;
                        top: 13px;
                        width: 10px;
                        height: 10px;
                        transform: rotate(45deg);
                        background-color: skyblue;
                    }
                }
                .chat_item_content_function{
                    margin-left: 12px;
                }
            }
        }
    }
}
</style>